<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
			<el-breadcrumb-item>数据报表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图区域 -->
		<el-card>
			<el-row :gutter="20" align="middle" justify="center" v-if="userinfo.role == 'admin' ">
				<el-col :span="8" v-for="(item,index) in total" :key="index">
					<div class="grid-content bg-purple">
						<img :src=" item._id == 'admin' ? adminImg : (item._id == 'business' ? shopImg : userImg) " />
						<span>{{ item._id == 'admin' ? '管理员 ' + item.user_total : (item._id == 'business' ? '商家 ' + item.user_total : '普通用户 ' + item.user_total) }}</span>
					</div>
				</el-col>
			</el-row>

			<template v-if="userinfo.role == 'business' ">
				<!-- 营业额数据 -->
				<el-row align="middle">
					<el-col :span="10">
						<div id="total" style="height:400px;margin: 0 auto;"></div>
					</el-col>
					<el-col :span="14">
						<!-- 订单数据 -->
						<div id="main" style="height:400px;margin: 0 auto;"></div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div id="day-sales" style="height:400px;margin: 0 auto 50px;"></div>
					</el-col>
					<el-col :span="24">
						<div id="week-sales" style="height:400px;margin: 0 auto 50px;"></div>
					</el-col>
					<el-col :span="24">
						<div id="month-sales" style="height:400px;margin: 0 auto;"></div>
					</el-col>
				</el-row>
			</template>

		</el-card>
	</div>
</template>

<script>
	// 1.导入echarts
	import echarts from 'echarts'
	import _ from 'lodash'
	export default {
		data() {
			return {
				total: [],
				adminImg: require('../../assets/img/admin.png'),
				shopImg: require('../../assets/img/shop.png'),
				userImg: require('../../assets/img/user.png'),
				// 日订单量
				orderOption: {
					color: ['#5470c6'],
					title: {
						text: '日订单量'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {
						feature: {

							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					legend: {
						data: ['订单量']
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							interval: 0
						}
					}],
					yAxis: [{
						type: 'value',
						name: '订单量',
						min: 0,
						minInterval: 1
					}],
					series: [{
						name: '订单量',
						type: 'bar',
						data: []
					}]
				},
				// 日,周,月销售数据
				daySaleOption: {
					title: {
						text: '店铺日销售额'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['日销售额']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value',
						name: '销售额',
					},
					series: [{
							name: '日销售额',
							type: 'line',
							data: []
						}
					]
				},
				weekSaleOption: {
					title: {
						text: '店铺周销售额'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: [ '周销售额']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value',
						name: '销售额',
					},
					series: [
						{
							name: '周销售额',
							type: 'line',
							data: []
						}
					]
				},
				monthSaleOption: {
					title: {
						text: '店铺月销售额'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['月销售额']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value',
						name: '销售额',
					},
					series: [
						{
							name: '月销售额',
							type: 'line',
							data: []
						}
					]
				},
				// 分类商品销售分布
				totalOption: {
					title: {
						text: '分类商品销售额分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '销售额',
						type: 'pie',
						radius: '50%',
						data: [],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
			}
		},
		created() {
			// 获取所有的用户数量
			this.userinfo = JSON.parse(window.sessionStorage.getItem('userinfo'));
			if (this.userinfo.role === 'admin') this.getUserTotal();
		},
		methods: {
			async getUserTotal() {
				const {
					data: res
				} = await this.$http.get('users/total');
				this.total = res.data.total;
			},
			async getShopSalesData() {
				const {
					data: res
				} = await this.$http.get('statics', {
					params: {
						_id: JSON.parse(window.sessionStorage.getItem('storeinfo'))._id
					}
				});
				console.log('销售数据', res);
				if (res.code != 200) return;
				// this.orderOption = res.data.day_orders;
				// this.saleOption = res.data.sales_valume;
				this.totalOption.series.data = res.data.shop_sales;
			}
		},
		// 此时页面上的元素已经被渲染完毕了
		async mounted() {
			var OrderChart = echarts.init(document.getElementById('main'));
			var daySalesChart = echarts.init(document.getElementById('day-sales'));
			var weekSalesChart = echarts.init(document.getElementById('week-sales'));
			var monthSalesChart = echarts.init(document.getElementById('month-sales'));
			var totalChart = echarts.init(document.getElementById('total'));

			// 数据请求
			if (JSON.parse(window.sessionStorage.getItem('storeinfo'))) {
				const {
					data: res
				} = await this.$http.get('statics', {
					params: {
						_id: JSON.parse(window.sessionStorage.getItem('storeinfo'))._id
					}
				});
				console.log('销售数据', res);
				if (res.code != 200) return;
				this.orderOption.xAxis[0].data = res.data.day_orders.xAxis;
				this.orderOption.series[0].data = res.data.day_orders.yAxis;
				this.daySaleOption.xAxis.data = res.data.sales_valume.xAxis;
				this.daySaleOption.series[0].data = res.data.sales_valume.series[0];
				this.weekSaleOption.xAxis.data = res.data.sales_valume.series[1].xAxis;
				this.weekSaleOption.series[0].data = res.data.sales_valume.series[1].series;
				this.monthSaleOption.xAxis.data = res.data.sales_valume.series[2].xAxis;
				this.monthSaleOption.series[0].data = res.data.sales_valume.series[2].series;
				this.totalOption.series[0].data = res.data.shop_sales;
				console.log(this.totalOption);
			};

			// 使用刚指定的配置项和数据显示图表。
			OrderChart.setOption(this.orderOption);
			daySalesChart.setOption(this.daySaleOption);
			weekSalesChart.setOption(this.weekSaleOption);
			monthSalesChart.setOption(this.monthSaleOption);
			totalChart.setOption(this.totalOption);

		},
	}
</script>

<style lang="less" scoped>
	.el-row {
		border: 2px solid #eee;
		padding: 10px 0;
		margin-bottom: 50px;
		border-radius: 5px;
	}

	.grid-content {
		display: flex;
		flex-direction: column;
		align-items: center;

		img {
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
		}
	}

	#charts {
		// margin-bottom: 50px;
	}
</style>
